<template>
  <el-row>
    <el-col class="col">
      <el-row class="row" justify="start">
        <el-col :span="5"
          >骑手手机号:<el-input
            v-model="deliverymanPhone"
            style="width: 180px"
            clearable
        /></el-col>
        <el-col :span="5"
          >骑手名称:<el-input
            v-model="deliverymanName"
            style="width: 180px"
            clearable
        /></el-col>
        <el-col :span="8"
          >注册日期:<el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY/MM/DD"
            value-format="YYYY-MM-DD"
            :size="size"
            @clear="clear"
          />
        </el-col>
        <el-col :span="2"
          ><el-button type="primary" @click="search">搜索</el-button></el-col
        >
      </el-row>
    </el-col>
    <el-col class="col">
      <el-button type="primary" @click="add">添加骑手</el-button>
    </el-col>
    <el-col class="col">
      <el-table :data="infoList" border style="width: 100%" fit="true">
        <el-table-column
          prop="deliverymanId"
          label="ID"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="deliverymanName"
          label="骑手名称"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="deliverymanPhone"
          label="手机号"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="deliveryOrderCount"
          label="接单数"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop="addTime"
          label="添加时间"
          align="center"
          label-class-name="header"
        />
        <el-table-column
          prop=""
          label="操作"
          align="center"
          label-class-name="header"
        >
          <!-- scope的作用是什么 -->
          <template #default="scope">
            <el-button type="text" @click="edit(scope)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col class="col">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :pager-count="8"
        :current-page="currentPage"
        @current-change="pChange"
    /></el-col>
    <el-col class="col">
      <el-dialog v-model="sign" :title="title" width="900" draggable>
        <AddRider
          v-if="title == '添加骑手'"
          :allXq="allXq"
          @only="only"
          @request="request"
        />
        <EditRider
          v-else-if="title == '编辑'"
          :info="info"
          :allXq="allXq"
          @only="only"
          @request="request"
        />
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, ref, watchEffect } from "vue";
import AddRider from "@/views/riderManagement/component/AddRider.vue";
import EditRider from "@/views/riderManagement/component/EditRider.vue";

import axios from "axios";

//获取全部小区名称列表#########
// let allXq = ref();
// onMounted(async function () {
//   let res = await axios.get(
//     "http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?pageNum=1&pageSize=9999999"
//   );
//   allXq.value = res.data.data.list.map((item) => item);
// });
//#####

let infoList = ref([]);
onMounted(async function () {
  //async和await的作用是什么
  let res = await axios.get(
    "http://43.143.190.87:8091/panghudaojiaBackend/deliveryman/queryDeliverymanList?pageNum=1&pageSize=10&phone=&keyword=&startTime=&endTime="
  );

  //分页逻辑
  currentPage.value = res.data.data.pageNum;
  total.value = res.data.data.total;
  //

  infoList.value = res.data.data.list.map((item) => item);
});

//请求
let deliverymanName = ref("");
let deliverymanPhone = ref("");
// let shopStatus = ref("");
let time = ref(["", ""]);

// let startTime = ref("");
// let endTime = ref("");
//当下面的数据发生变化，就会更新数据
watchEffect(function () {
  // eslint-disable-next-line no-self-assign
  deliverymanName.value = deliverymanName.value;
  // eslint-disable-next-line no-self-assign
  deliverymanPhone.value = deliverymanPhone.value;
  // eslint-disable-next-line no-self-assign
  //   shopStatus.value = shopStatus.value;
  // eslint-disable-next-line no-self-assign
  time.value[0] = time.value[0];
  // eslint-disable-next-line no-self-assign
  time.value[1] = time.value[1];
});
//搜索点击事件#########
const search = async function () {
  //网络请求，刷新数据源
  let res = await axios.get(
    `http://43.143.190.87:8091/panghudaojiaBackend/deliveryman/queryDeliverymanList?pageNum=${
      currentPage.value
    }&pageSize=10&phone=${deliverymanPhone.value}&keyword=${
      deliverymanName.value
    }&startTime=${
      time.value[0] == "" ? "" : time.value[0] + "+00:00:00"
    }&endTime=${time.value[1] == "" ? "" : time.value[1] + "+00:00:00"}`
  );
  total.value = res.data.data.total;

  infoList.value = res.data.data.list.map((item) => {
    // item.address =
    //   item.communityProvince + item.communityCity + item.communityDistrict;
    return item;
  });
};
//日期清空事件
const clear = function () {
  time.value = ["", ""];
};
//
//--
//分页器逻辑########
let currentPage = ref();
let total = ref();
const pChange = async function (pages) {
  currentPage.value = pages;
  console.log("分页变化");
  console.log(currentPage.value);

  //网络请求，刷新数据源
  let res = await axios.get(
    `http://43.143.190.87:8091/panghudaojiaBackend/deliveryman/queryDeliverymanList?pageNum=${
      currentPage.value
    }&pageSize=10&phone=${deliverymanPhone.value}&keyword=${
      deliverymanName.value
    }&startTime=${
      time.value[0] == "" ? "" : time.value[0] + "+00:00:00"
    }&endTime=${time.value[1] == "" ? "" : time.value[1] + "+00:00:00"}`
  );
  total.value = res.data.data.total;
  infoList.value = res.data.data.list.map((item) => {
    // item.address =
    //   item.communityProvince + item.communityCity + item.communityDistrict;
    return item;
  });
};
//#########

//点击新增小区、门店管理、修改门店资料逻辑##########
let sign = ref(false);
let title = ref();
let info = ref();
const add = function (data) {
  console.log(data);
  sign.value = true;
  title.value = "添加骑手";
};
//点击门店管理

const edit = function (data) {
  info.value = data.row;
  sign.value = true;
  title.value = "编辑";
};
//#########

//自定义事件########
const only = function (check) {
  sign.value = check;
};
async function request() {
  let res = await axios.get(
    `http://43.143.190.87:8091/panghudaojiaBackend/deliveryman/queryDeliverymanList?pageNum=${
      currentPage.value
    }&pageSize=10&phone=${deliverymanPhone.value}&keyword=${
      deliverymanName.value
    }&startTime=${
      time.value[0] == "" ? "" : time.value[0] + "+00:00:00"
    }&endTime=${time.value[1] == "" ? "" : time.value[1] + "+00:00:00"}`
  );
  infoList.value = res.data.data.list.map((item) => {
    return item;
  });
}
//#########
</script>


<style lang="less" scoped>
.col {
  margin: 10px 0;
  .row {
    margin-top: 20px;
    box-sizing: border-box;
  }
}
.button {
  font-size: 25px;
}
/deep/ .header {
  background-color: #1890ff !important;
  color: white;
}
</style>